/**
 * 全局变量, 指定Tab类中的构造器的this
 */
let that;

class Tab {

    constructor(id) {
        // 获取元素
        that = this;
        this.main = document.querySelector(id);
        this.ul = this.main.querySelector('.first-nav ul:first-child')
        this.tabScon = this.main.querySelector('.tab-scon');
        this.tabAdd = this.main.querySelector('.tab-add')
        // console.log(this.sections)


        this.init();
    }

    /**
     * init 初始化操作让相关的元素绑定事件
     */
    init() {
        // 添加tab
        this.updateNode();
        this.tabAdd.addEventListener('click', this.addTab);
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].addEventListener('click', this.toggleTab)
            this.removeBtns[i].addEventListener('click', this.removeTab)
            this.spans[i].addEventListener('dblclick', this.editTab)
            this.sections[i].addEventListener('dblclick', this.editTab)
        }
    }

    /**
     * 获取所有的 li 和 section
     * 因为我们动态添加元素, 需要重新获取对应的元素
     */
    updateNode() {
        this.lis = this.main.querySelectorAll('li')
        this.sections = this.main.querySelectorAll('section')
        // this.removeBtns = this.main.querySelectorAll('li span:last-child')
        this.removeBtns = this.main.querySelectorAll('.icon-guanbi')
        this.spans = this.main.querySelectorAll('li span:first-child')
    }

    /**
     * 1.切换功能
     */
    toggleTab() {

        // 这里的 this 指向的调用者 --> li
        console.log(this.index);
        // 排他思想
        that.clearClass();
        this.className = 'li-active';
        that.sections[this.index].className = 'con-active';
    }

    /**
     * 添加功能
     */
    addTab() {
        that.clearClass();
        // let li = document.createElement('li');
        // let section = document.createElement('section');
        var number = Math.random();
        let length = that.lis.length;
        // li.innerHTML = `<span>测试${length + 1}</span><span class="iconfont icon-guanbi"></span>`;
        // section.innerHTML = `测试${length + 1}`;

        var li = `<li class="li-active"><span>测试${length + 1}</span><span class="iconfont icon-guanbi"></span></li>`;
        var section = `<section class="con-active">测试${number}</section>`;

        // that.ul.appendChild(li)
        // that.tabScon.appendChild(section);
        that.ul.insertAdjacentHTML('beforeend', li);
        that.tabScon.insertAdjacentHTML("beforeend", section);

        that.init();
    }

    /**
     * 3.删除功能
     */
    removeTab(e) {
        // 阻止事件冒泡!!!,  关闭按钮与它的父元素tab栏, 都有click事件
        // 阻止事件冒泡的兼容性解决方案
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }

        var index = this.parentElement.index;

        var removeLi = that.ul.removeChild(that.ul.children[index]);
        that.tabScon.removeChild(that.tabScon.children[index]);

        that.init();

        // 但我们删除了选中状态的这个li的时候, 让它的前一个li处于选定状态
        if (index > 0 && removeLi.className === 'li-active') {
            index--;
            // 手动调用我们的点击事件, 不需要鼠标触发
            that.lis[index].click();
        }
    }

    /**
     * 修改功能
     */
    editTab() {
        var str = this.innerHTML;
        // 双击禁止选定文字
        // window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        // 正确做法: 阻止mousedown的默认行为, 才能阻止双击选中文本
        this.onmousedown = () => {
            return false;
        }

        this.innerHTML = `<input type="text" value="${str}"/>`
        var input = this.children[0];
        // 文本框里面你的文字处于选定状态
        input.select();
        // 当我们离开文本框就把文本框里面的值给span
        input.addEventListener('blur', function () {
            this.parentElement.innerHTML = this.value;
        })

        // 按下回车也可以把文本框里面的值给span
        input.addEventListener('keyup', function (e) {
            // 13 是回车键!!!
            if (e.keyCode === 13) {
                // 手动调用表单失去焦点事件, 不需要鼠标离开操作
                this.blur();
            }
        })
    }

    /**
     * 清除所有 li 和 section 的样式
     */
    clearClass() {
        for (let li of that.lis) {
            li.className = '';
        }
        for (let section of that.sections) {
            section.className = '';
        }
    }

}


new Tab('#tab');

